<template>
    <div class="home">
      <div class="swiper-box">
      <swiper :options="swiperOption" ref="mySwiper" class="swiper-warp">
        <!-- 幻灯内容 -->
        <swiperSlide class="swiper-item" v-for="(item,index) in slides" :key="index">
          <img :src="item.url">
        </swiperSlide>

       </swiper>
        <div class="paginaion-box" >
          <span v-for="(item,index) in slides" :class="[index==actIndex ? 'actindex' :'']" :key="index"></span>
        </div>
        </div>
      <div class="new_list">
        <ul>
          <li  v-for="(item,index) in news"  :class="[item.active ? 'newactive':'']"  @click="handleSelectList(index)"  :key="index">
            {{item.txt}}
          </li>
          <li>
            <em></em>
          </li>
        </ul>
      </div>
      <div class="group_container">
        <scroller
                   delegate-id="myScroller"
                  :on-refresh="refresh"
                  :on-infinite="infinite"
                  ref="my_scroller">
          <div class="content_slide"
               :newsData1="dataArr1"
               :newsData2="dataArr2"
               :newsData3="dataArr3"
               :cityid="cityId"
               :is="setComponents"
               keep-alive
          ></div>
        </scroller>
      </div>
    </div>
</template>
<style>
    body {
        /*background-color: #ff0000;*/
    }
    .home{
      width:100%;
    }
    .swiper-item{
      width:100%;

    }
    .swiper-item img{
      width:100%;
      height:3.2rem;
    }

    .paginaion-box{display:flex;
      justify-content: center;
      align-items: center;
      position:absolute;
      bottom:0;
      left:0;
      height:0.4rem;
      width:100%;

      z-index:3;
    }
    .paginaion-box span{
      width:0.35rem;
      height:0.04rem;
      margin-right:0.2rem;
      background:rgba(255,255,255,0.4);
      display:inline-flex;

    }
    .actindex{
      background:#fff !important;
    }
    .swiper-box{
      width:100%;
      position:relative;
      /*height:3.2rem;*/
    }



    .new_list>ul {
      display:flex;
      display:-webkit-flex;
      justify-content: space-between;
      box-sizing: border-box;
      height:100%;
      list-style: none;
    }

    .new_list{
      height:0.68rem;
      padding:0 0.3rem;
      border-bottom:1px solid #eee;
    }
    .new_list ul li{
      height:100%;
      font-size:0.26rem;
      text-align: left;
      box-sizing: border-box;
      position:relative;
      color:#666;
      line-height: 0.68rem;
    }
    .new_list ul li:last-child{
      width:6%;
      height:100%;
    }
    .new_list ul li:last-child:before{
      content:"";
      display:inline-block;
      width:0.48rem;
      height:0.48rem;
      background:url(../../static/zhengWu/more_selet.png) no-repeat center;
      background-size:cover;
      position:absolute;
      right:-0.1rem;
      top:50%;
      transform: translateY(-50%);
    }
    .newactive{
      color:#ff0033 !important;
      border-bottom:2px solid #ff0033;
    }
    .group_container{
      position:absolute;
      top:3.88rem;
      bottom:0;
      left:0;
      right:0;

      /*overflow-y: auto;*/
    }



</style>
<script>


  import Vue from 'vue'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import NewList from '@/components/NewList.vue';
  import Government from '@/components/Government.vue';
  import Business from '@/components/Business.vue';
  import {mapGetters} from 'vuex'
  //require('swiper/dist/css/swiper.css')
  import 'swiper/dist/css/swiper.css'
  export default{
         props:['cityId'],
         data(){
            return {
              bntcityactive:false,
              dataArr1:[],
              dataArr2:[],
              dataArr3:[],
              dataAll:[],
              pageIndex:0,
              isPapgeIndex:{
                dataIndex1:0,
                dataIndex2:0,
                dataIndex3:0
              },
              typeNews:1,
              text:'getText',
              actIndex:0,
              setComponents:'NewList',
              news:[
                {txt:'通知公告',active:true},
                {txt:'政务信息',active:false},
                {txt:'业务信息',active:false}],
              swiperOption: {
                // 所有配置均为可选（同Swiper配置）
                //notNextTick: true,
                autoplay: 3500,
                setWrapperSize :true,
                pagination : '.swiper-pagination',
                paginationClickable :true,
                autoplayDisableOnInteraction:false,
                mousewheelControl : true,
                observeParents:true,
                onTransitionStart : (swiper)=>{
                  //console.log(swiper)
                  this.actIndex = swiper.activeIndex
                }
              },

         slides : [{url:'../../static/zhengWu/pic_06.png'},
                {url:'../../static/zhengWu/img4.jpg'},
                {url:'../../static/zhengWu/pic_08.jpg'},
                {url:'../../static/zhengWu/pic_09.jpg'},
                ]
               }

        },
    methods:{
      handleSelectList(index){
        this.typeNews = index+1
        //this.ajaxNewData(index+1,this.cityId);//点导航新闻列表触发请求；
        let setComponent = 'NewList'
        switch(index){ // 动态切换组件
          case 0:
            //this.setdataArr = this.dataArr1
            this.pageIndex = this.dataIndex1;
            (this.dataArr1.length == 0 ) && this.ajaxNewData(index+1,this.cityId);
            //this.dataArr1 = this.dataList.data;
            setComponent = 'NewList'
            break;
          case 1:
            setComponent = 'Government';
            //this.setdataArr = this.
              (this.dataArr2.length == 0 ) && this.ajaxNewData(index+1,this.cityId);
               this.pageIndex = this.dataIndex2;
               //this.dataArr2 = this.dataList.data;
               //console.log(this.setdataArr)
            break;
          case 2:
            setComponent = 'Business';
            //this.setdataArr = this.dataArr3
            (this.dataArr3.length == 0 ) && this.ajaxNewData(index+1,this.cityId);
            this.pageIndex = this.dataIndex3
            //this.dataArr3 = this.dataList.data;
            break;
        }
        this.setComponents = setComponent;
        for(let i = 0 ; i< this.news.length; i++){
          if(index==i){
            this.news[i].active = true;
          }else{
            this.news[i].active = false;
          }
        }

        //let values='我的数值为'+index
        //this.$store.dispatch('getTest',values)
      },
      ajaxNewData(typeId,cityIndex){ //请求方法封装；
        this.$store.dispatch('defultGetTestData',{msgType:typeId,cityId:cityIndex});

      },
      cityAjax(){
        //console.log($scroller)
        //$scroller.get('myScroller').finishInfinite({isNoMoreData :false})
        this.bntcityactive = true;
        this.ajaxNewData( this.typeNews,this.cityId)
        if(this.typeNews == 1){
          this.dataArr1 = this.dataList.data
        }else if (this.typeNews == 2) {
          this.dataArr2 = this.dataList.data
        } else if (this.typeNews == 3) {
          this.dataArr3 = this.dataList.data
        }
        this.bntcityactive = false;
        //console.log(this.dataList.data)
      },
     pushData(){
               if(!this.bntcityactive) {
                 this.dataArr1 = this.dataList.data
               }else{
                 if(this.typeNews == 1){
                   this.dataArr1 = this.dataList.data
                 }else if (this.typeNews == 2) {
                   this.dataArr2 = this.dataList.data
                 } else if (this.typeNews == 3) {
                   this.dataArr3 = this.dataList.data
                 }
                 this.bntcityactive = false;
               }

            },
      pullajax(done,dataArr,ispull){
        $.ajax({
          url:'../static/data/newsList.json',
          type:'GET',
          dataType:'JSON',
          data:{

          },
          success(res){
//            res.data.map(function(item){dataArr.push(item)})
            if(ispull){
              for(let i =0; i<res.data.length;i++){
                let item = res.data[i];
                dataArr.push(item)
              }
            }else{
              dataArr = res.data;
            }
          },
          error(err){
            //console.log(err)
          },
          complete(){
            done()
          }

        })
      },
      refresh(done) {
        setTimeout(() => {

          if (this.typeNews == 1) {
          this.pullajax(done, this.dataArr1,false)
        } else if (this.typeNews == 2) {
          this.pullajax(done, this.dataArr2,false)
        } else if (this.typeNews == 3) {
          this.pullajax(done, this.dataArr3,false)
        }
        done()
      }, 1500)
      },

      infinite(done) {
        setTimeout(() => {
          if(!this.bntcityactive){
          if (this.typeNews == 1) {
            this.pullajax(done, this.dataArr1,true)
          } else if (this.typeNews == 2) {
            this.pullajax(done, this.dataArr2,true)
          } else if (this.typeNews == 3) {
            this.pullajax(done, this.dataArr3,true)
          }
        }

      }, 1500)

      },
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      },
      ...mapGetters({getText:'getTestValue',dataList:'getNewsData'}),

    },
     created(){
     this.ajaxNewData(1,this.cityId);
   },
    mounted(){
    this.top = 1
    this.bottom = 20
    //console.log(this.dataList)
      //alert(this.$parent.$data.citylocation);
      //这边就可以使用swiper这个对象去使用swiper官网中的那些方法
      //this.swiper.slideTo(0, 0, false);
    },
   watch:{
     cityId:'cityAjax', //计算属性监听城市Id变化，发起ajax 请求；
     //dataList:'pushData'

   },
    components:{
      swiper,
      swiperSlide,
      NewList,
      Government,
      Business
     }

    }

</script>
